<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_定位之粘性定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 5000px;
        }
        .menu{
            height: 200px;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
            background-color: orange;
        }
        .one{
            font-size: 40px;
            height: 100px;
            background-color: #888;
            position: sticky;
            top: 0;

        }
    </style>
</head>
<body>
<!--
    粘性定位:
        如何设置粘性定位呢？
            1.给元素设置position属性值为sticky
            2.可以使用left、right、top、bottom属性进行定位，即可实现上下左右的定位，不过最常用的是top属性
        粘性定位的参考点在哪里？
            离他最近的一个拥有滚动机制的祖先元素。即使这个祖先不是最近的真实可以滚动的元素。
        粘性定位元素特点：
            1.不会脱离文档流。它是一种专门用于窗口滚动时的新的定位方式。
            2.最常用的值是top值。
            3.粘性定位可以和浮动可以同时设置。但是不推荐这么做。
            4.粘性定位的元素，也能通过margin调整位置，但是不推荐这样做。
        粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

-->
    <div class="menu">菜单</div>
    <div class = content>
        <div class="item">
              <div class="one">A</div>
              <h2>A1</h2>
              <h2>A2</h2>
              <h2>A3</h2>
              <h2>A4</h2>
              <h2>A5</h2>
              <h2>A6</h2>
              <h2>A7</h2>
              <h2>A8</h2>
              <h2>A9</h2>
              <h2>A10</h2>
          </div>
        <div class="item">
            <div class="one">B</div>
            <h2>B1</h2>
            <h2>B2</h2>
            <h2>B3</h2>
            <h2>B4</h2>
            <h2>B5</h2>
            <h2>B6</h2>
            <h2>B7</h2>
            <h2>B8</h2>
            <h2>B9</h2>
            <h2>B10</h2>
        </div>
        <div class="item">
            <div class="one">C</div>
            <h2>C1</h2>
            <h2>C2</h2>
            <h2>C3</h2>
            <h2>C4</h2>
            <h2>C5</h2>
            <h2>C6</h2>
            <h2>C7</h2>
            <h2>C8</h2>
            <h2>C9</h2>
            <h2>C10</h2>
        </div>
    </div>
</body>
</html>